import React, { Component, Suspense } from 'react';
import { connect } from 'dva';
import { Tag, Drawer, Form, Button, Col, Row, Input, Select, DatePicker, Icon, message, Radio, Tabs, Collapse, } from 'antd';
import styles from './typeNode.less';
import Editor from '@/utils/Editor';
const TabPane = Tabs.TabPane;
const { TextArea } = Input;
const { Panel } = Collapse;
class AnswerBack extends React.Component {


    toParent(funName,index,type,refsCon) {
        let data = {funName,index,type,refsCon}
        if(this.props.answer.answerQuestion){
          this.props.deleteQuestionFrom(index)
        }
        this.props.callbackFromChild(data)
    }

    render() {
        const { answer, index, qaActiveKeys } = this.props
        const genExtra = (index, isDefault) => (
            <span>
                <Button
                    type="primary"
                    style={{ marginLeft: 10 }}
                    icon="edit"
                    size="small"
                    onClick={event => {
                        event.stopPropagation();
                        this.toParent("onEditQa",index,'edit')
                    }}
                    htmlType="button"
                    // disabled={this.state.synchronous}
                >
                    {' '}
                编辑
              </Button>
                {!isDefault ? (
                    <Button
                        type="danger"
                        style={{ marginLeft: 10 }}
                        icon="close"
                        size="small"
                        onClick={event => {
                            event.stopPropagation();
                            this.toParent("onEditQa",index,'del')
                            // this.onEditQa(index, 'del');
                        }}
                        htmlType="button"
                        // disabled={this.state.synchronous}
                    >
                        {' '}
                  删除
                    </Button>
                ) : (
                        ''
                    )}
            </span>
        );
        return (
            <div>
                <Collapse
                    defaultActiveKey={qaActiveKeys}
                    expandIconPosition="right"
                    style={{ marginTop: 10 }}
                >
                    {!answer.isDefault && answer.slotValues ? (
                        <Panel
                            header={answer.slotValues.map((slotValueItem, slotValueIndex) => {
                                return (
                                    <span key={slotValueIndex}>
                                        &lt;{slotValueItem.slotName}&gt;=
                                        <Tag color="#108ee9">
                                            {slotValueItem.values.map((tag, tagIndex) => {
                                                return (
                                                    <span
                                                        key={tagIndex}
                                                        style={{ marginLeft: 5, marginRight: 5 }}
                                                    >
                                                        {tag}
                                                    </span>
                                                );
                                            })}
                                        </Tag>
                                    </span>
                                );
                            })}
                            key={index}
                            extra={genExtra(index, answer.isDefault)}
                        >
                            <div
                                className={styles.previewAnswer}
                                dangerouslySetInnerHTML={{ __html: answer.content }}
                            />
                        </Panel>
                    ) : (
                            <Panel
                                header="普通答案"
                                key={index}
                                extra={genExtra(index, answer.isDefault)}
                            >
                                <div
                                    className={styles.commAnwer}
                                    dangerouslySetInnerHTML={{ __html: answer.content }}
                                />
                            </Panel>
                        )}
                </Collapse>
            </div>
        )
    }
}

export default AnswerBack
